<template>
	<view class="couponWrapper" :class="[
									couponInfo.couponCategory == 1?'bg1' : '',
									couponInfo.couponCategory == 2?'bg2' : '',
									couponInfo.couponCategory == 3?'bg3' : '',
								 
								 ]" @click="selectedCoupon">
		<view class="couponBox">
			<view class="left">
				<text v-if="couponInfo.couponCategory == 2" class="text2">{{couponInfo.discount}}</text>
				<text v-else class="text1">{{couponInfo.preferentialMoney}}</text>
				<text class="desc">{{couponInfo.couponCategory | couponCategory}}</text>
			</view>
			<view class="middle">
				<text style="margin-top: 36rpx;">{{couponInfo.couponName}}</text>
				<text style="margin-top: 60rpx;">{{couponInfo.couponTime}}</text>
			</view>
			<view class="right">
				<image style="width: 38upx; height: 38upx;"
					:src="currentIndex === index ? '/pagesA/static/radio_selected.png' : '/pagesA/static/radio_default.png'"
					mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'order-coupon',
		data() {
			return {

			}
		},
		props: {
			couponInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			index: {
				type: Number,
				default: -1
			},
			currentIndex: {
				type: Number,
				default: -1
			}
		},
		mounted() {

		},
		methods: {
			selectedCoupon() {
				this.$emit('selectedCoupon', this.couponInfo, this.index);
			}
		}

	}
</script>

<style lang="scss" scoped>
	.couponWrapper {
		// position: relative;
		margin: 24rpx;
		// background-color: #EB454B;
		border-radius: 16rpx;
		// padding: 18rpx;
		// &.bg1 {
		// 	background-color: #EB454B;
		// }
		// &.bg2 {
		// 	background-color: #4485E6;
		// }
		// &.bg3 {
		// 	background-color: #F0B432;
		// }
	}

	.couponBox {
		background-image: url('https://qykh.shopec.com.cn/image-server/dz/couponBg.png');
		background-size: 100% 100%;
		position: relative;
		width: 100%;
		height: 190upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 99;
	}

	.left {
		width: 33%;
		// height: 190upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			display: block;
			color: $text-color-33;
			font-weight: bold;
		}

		.text1{
			font-size: 67upx;
			&::before {
				content: '¥';
				color: $text-color-33;
				font-size: 22upx;
			}
		}
        .text2{
        	font-size: 67upx;
        	&::after {
        		content: '折';
        		color: $text-color-33;
        		font-size: 22upx;
        	}
        }
		.desc {
			font-size: 22upx;
		}
	}

	.middle {
		width: 33%;
		height: 190upx;
		color: $text-color-33;
		font-size: 26upx;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		right: 20rpx;

		text:nth-child(2) {
			font-size: 16rpx;
			color: #666;
		}
	}

	.right {
		width: 33%;
		height: 190upx;
		line-height: 190upx;
		text-align: center;
		color: $text-color-99;
	}

	.couponBg {
		width: 100%;
		height: 190upx;
		display: block;
		position: absolute;
	}
</style>
